<template>
<div>
        <!-- 导航部分开始 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>设备管理</el-breadcrumb-item>
            <el-breadcrumb-item>设备台账</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 导航部分结束 -->
            <!--  Dv搜索栏开始 -->
        <el-form style="margin-top: 15px;" :inline="true" :model="queryDv" class="demo-form-inline">
            <el-form-item>
                <el-input v-model="queryDv.machineryTypeName" placeholder="请输入分类名称" clearable />
            </el-form-item>
        </el-form>
<!--  Dv搜索栏结束 -->
 <!-- 表格 开始 -->
 <el-table :data="dv" style="width: 100%; margin-bottom: 20px" row-key="machineryTypeId" border default-expand-all
            :tree-props="{ children: 'children' }">
            <el-table-column align="center" label="设备类型名称" property="machineryTypeName" />
        
        </el-table>
        <!-- 表格 结束 -->
        <!--  搜索栏开始 -->
        
        <el-form style="margin-top: 15px;" :inline="true" :model="queryLedger" class="demo-form-inline">
            <el-form-item label="设备编码">
                <el-input v-model="queryLedger.machineryCode" placeholder="请输入设备编码" clearable />
            </el-form-item>
            <el-form-item label="设备名称">
                <el-input v-model="queryLedger.machineryName" placeholder="请输入设备名称" clearable />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="loadLedger">搜索</el-button>
            </el-form-item>
            <el-form-item>
                <el-button @click="clearLedgerjectType"><el-icon>
                        <Refresh />
                    </el-icon>重置</el-button>
            </el-form-item>
        </el-form>
        <!--  搜索栏结束 -->
        <!-- 工具栏开始 -->
        <div class="flex">
            <el-button @click="this.addLedgerjectDialogVisible = true" type="primary" plain><el-icon>
                    <Plus />
                </el-icon>
                新增
            </el-button>
            <el-button type="success" plain><el-icon>
                    <EditPen />
                </el-icon>
                修改
            </el-button>
            <el-button type="danger" plain><el-icon>
                    <Delete />
                </el-icon>
                删除
            </el-button>
            <el-button type="warning" plain><el-icon>
                    <Download />
                </el-icon>
                导入
            </el-button>
            <el-button type="warning" plain><el-icon>
                    <Download />
                </el-icon>
                导出
            </el-button>
        </div>
        <!-- 工具栏结束 -->

       <!-- 表格 开始 -->
       <el-table  :data="Ledger" max-height="800px" stripe="true" border="true"
            style="width: 90%;margin-top: 10px;">
            <el-table-column align="center" type="selection" width="55" />
            <el-table-column align="center" label="设备编码" property="machineryCode"/>
            <el-table-column align="center" label="设备名称" property="machineryName"/>
            <el-table-column align="center" label="品牌" property="machineryBrand"/>
            <el-table-column align="center" label="规格型号" property="machinerySpec"/>
            <el-table-column align="center" label="所属车间" property="workShopName"/>
            <el-table-column align="center" label="设备状态" property="STATUS"/>
            <el-table-column align="center" label="创建时间" :formatter="timeFormatter" property="createTime" />
            <el-table-column width="150" align="center" label="操作">
                <template #default="scope">
                    <el-button size="small" @click="handleEdit(scope.row)">修改</el-button>
                    <el-popconfirm confirm-button-text="是" cancel-button-text="点错了" @confirm="handleDelete(scope.row)"
                        title="您是否要删除这行数据">
                        <template #reference>
                            <el-button size="small" type="danger">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <!-- 表格 结束 -->
         <!-- 分页栏开始 -->
         <el-pagination style="margin-top: 15px;" :page-size="LedgerLimit" :pager-count="LedgerMaxPage"
            @current-change="changePage" background layout="prev, pager, next" :total="LedgerTotal" />
        <!-- 分页栏结束 -->    
          <!-- 添加设备的弹窗窗体开始-->
          <el-dialog v-model="addLedgerjectDialogVisible" title="添加项目信息" width="600" align-center>
            <!-- 添加设备的表单 -->
            <el-form label-width="100px" :model="newLedger" style="max-width: 460px">
                <el-form-item label="设备编码">
                    <el-input v-model="newLedger.machineryCode" />
                </el-form-item>
                <el-form-item label="设备名称">
                    <el-input v-model="newLedger.machineryName" />
                </el-form-item>
                <el-form-item label="品牌">
                    <el-input v-model="newLedger.machineryBrand" />
                </el-form-item>
                <el-form-item label="规格型号">
                    <el-input v-model="newLedger.machinerySpec" />
                </el-form-item>
                <el-form-item label="设备类型Id">
                    <el-input v-model="newLedger.machineryTypeId" />
                </el-form-item>
                <el-form-item label="所属车间Id">
                    <el-input v-model="newLedger.workShopId" />
                </el-form-item>
                <el-form-item label="所属车间名称">
                    <el-input v-model="newLedger.workShopName" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancelAddLedger">取消</el-button>
                    <el-button type="primary" @click="doAddLedger">
                        提交
                    </el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 添加设备的弹窗窗体结束-->   
         <!--修改设备的抽屉弹窗开始 -->
         <el-drawer v-model="LedgerEditDrawer" :direction="direction">
            <template #header>
                <h4>修改设备信息</h4>
            </template>
            <template #default>
                <div>
                    <!-- 修改设备的表单 -->
                    <el-form label-width="100px" :model="editLedger" style="max-width: 460px">
                        <el-form-item label="设备编码">
                    <el-input v-model="editLedger.machineryCode " />
                </el-form-item>
                <el-form-item label="设备名称">
                    <el-input v-model="editLedger.machineryName" />
                </el-form-item>
                <el-form-item label="品牌">
                    <el-input v-model="editLedger.machineryBrand" />
                </el-form-item>
                <el-form-item label="规格型号">
                    <el-input v-model="editLedger.machinerySpec" />
                </el-form-item>  
                <el-form-item label="所属车间">
                    <el-input v-model="editLedger.workShopName" />
                </el-form-item>  
                    </el-form>
                </div>
            </template>
            <template #footer>
                <div style="flex: auto">
                    <el-button @click="cancelEdit">取消</el-button>
                    <el-button type="primary" @click="doLedgerEdit">提交</el-button>
                </div>
            </template>
        </el-drawer>
        <!-- 修改设备的抽屉弹窗结束 -->
    </div>
</template>
<script>
import LedgerRequest from '../../../api/ledger-api.js';
import tools from '../../../util/tools.js';
import dvRequest from '../../../api/device-type-api.js';
export default {
    data() {
        return {
            Ledger: [],//设备类型数据列表
            queryLedger:{},
            queryDv:{},
            dv: [],//设备类型数据列表
            LedgerCurrPage: 1, // 项目分页的当前页码
            LedgerLimit: 10, // 项目分页的每页大小
            LedgerTotal: 0, // 项目分页的总条数
            LedgerMaxPage: 1,// 项目分页的最大页码
            newLedger:{},//新添加设备信息
            editLedger:{},// 当前正在修改的设备对象
            LedgerEditDrawer: false,//标记修改设备信息的窗体是否显示
            direction: 'rtl',// 抽屉的方向
          
            addLedgerjectDialogVisible: false,//新增设备类型弹窗标志
        }
    },
    methods: {  
         /**
        * 项目修改提交按钮事件
        */
        doLedgerEdit() {
            // 提交editLedgerr即可
            LedgerRequest.edit(this.editLedger, res => {
                // 这里的res就是我们的后端返回的MESResult对象
                if (res.code == '200') {
                    this.$message({
                        message: '修改项目成功',
                        type: 'success'
                    });
                    //关闭窗体
                    this.LedgerEditDrawer = false;
                    // 重新加载数据
                    this.loadLedger();
                    // 将editLedger制空
                    this.editLedger = {};
                } else if (res.code == '300') {
                    this.$message({
                        message: '项目名重复',
                        type: 'warning',
                    });
                } else {
                    this.$message({
                        message: '修改失败',
                        type: 'error',
                    });
                }
            });
        },
        /**
         * 取消用户编辑操作
         */
        cancelEdit() {
            // 将编辑的设备类型制空
            this.editLedger = {};
            // 关闭抽屉弹窗
            this.LedgerEditDrawer = false;
        },
        /**
        * 行编辑按钮事件
        * @param {*} row 整行数据 
        */
        handleEdit(row) {
            // 通过id加载要编辑的用户信息
            LedgerRequest.get(row.machineryId, res => {
                // 将查询的用户信息设置到editSUb中
                this.editLedger = res.data;
                // 显示抽屉弹窗
                this.LedgerEditDrawer = true;
            });
        },
         /**
         * 行删除按钮事件
         * @param {*} row 整行数据
         */
         handleDelete(row) {
            LedgerRequest.delete(row.machineryId,res => {
                if (res.code == 200) {
                    this.$message({
                        type: "success",
                        message: "删除成功"
                    });
                    this.loadLedger();
                } else {
                    this.$message({
                        type: "error",
                        message: "删除失败"
                    });
                }
            })
        },
        /**
         * 添加设备的提交按钮
         */
         doAddLedger() {
            LedgerRequest.save(this.newLedger, res => {
                // 这里的res就是我们的后端返回的MESResult对象
                if (res.code == '200') {
                    this.$message({
                        message: '添加用户成功',
                        type: 'success'
                    });
                    //关闭窗体
                    this.addLedgerjectDialogVisible = false;
                    // 重新加载数据
                    this.loadLedger();
                    // 将newLedger制空
                    this.newLedger = {};
                } else if (res.code == '300') {
                    this.$message({
                        message: '用户名重复',
                        type: 'warning',
                    });
                } else {
                    this.$message({
                        message: '添加失败',
                        type: 'error',
                    });
                }
            });
        },
        /**
         * 取消添加设备的操作
         */
        cancelAddLedger() {
            // 将newLedger制空
            this.newLedger = {};
            // 关闭窗体
            this.addLedgerjectDialogVisible = false;
        },

         /**
         * 时间毫秒数转换为对应的字符串
         * @param {*} time 
         */
         timeFormatter(row, column, time) {
            return tools.timeMillisToString(time);
        },
          /**
         * 字典列表的翻页函数
         * @param {} value  最新页码
         */
         changePage(value) {
            this.LedgerCurrPage = value;
            this.loadLedger();
        },
        
        /**
         * 加载设备类型数据
         */
        loadLedger() {
            
            LedgerRequest.list(this.LedgerCurrPage, this.LedgerLimit, this.queryLedger, res => {
                // 设置数据
                this.Ledger = res.data.data;
                this.LedgerTotal = res.data.total;
                this.LedgerMaxPage = res.data.pages;
            });
        },
        /**
         * 加载设备类型数据
         */
         loadDv() {
           
           dvRequest.list(this.queryDv.machineryTypeName,this.queryDv.enableFlag,res => {
               this.dv = res.data;
           
           });

       },
        clearLedgerjectType() {
            this.queryLedger.machineryCode='',
            this.queryLedger.machineryName='',
            this.loadLedger();
        }

    },
    mounted() {
        /**
         * 默认加载数列表
         */
        this.loadLedger();
        this.loadDv();
    }

}

</script>